<template>
    <div id="container">
        <div id="viewDiv"></div> 
        <el-main  style="position:absolute;top:15px;left:15px;width:450px;max-height:600px;background-color:white;box-shadow:0 0 5px gray;overflow:hidden">
            <div id="layerList" style="width:100%;">
            </div>
        </el-main>
        <div ref="山东省道路_panel">
        </div>
        <div ref="青岛市AOI_panel" >
            <div style="display:flex;flex-direction:row;align-items: center;width:100%;">
                <span>按名称搜索:&nbsp;</span>
                <el-input prefix-icon="Search" style="width:180px;margin-right:10px;" v-model="按名称查询" ></el-input>
                <el-button size="small"  type="danger" plain @click="重置_click">重置</el-button>
                <el-button size="small"  type="success" plain @click="按名称查询_click">搜索</el-button>
            </div>
            <el-table style="width:100%;height:220px;" :style="{display:table_display}" :data="table_data" show-header @row-dblclick="table_dblclick" >
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
    
<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import LayerList from '@arcgis/core/widgets/LayerList'
import Query from '@arcgis/core/rest/support/Query'
var map,view,layerList,线要素图层,面要素图层,query
const 山东省道路_panel=ref()
const 青岛市AOI_panel=ref()
const 按名称查询=ref('亚星花园')
const table_display=ref('none')
const table_data=ref([])
var 按名称查询_click=()=>{
    if(!按名称查询.value){
        return
    }
    table_data.value=[]
    table_display.value="none"
    query=new Query({
        returnGeometry:true,
        where:`name like '%${按名称查询.value}%'`,
        outSpatialReference:{wkid:3857},
        outFields:["*"]
    })
    面要素图层.queryFeatures(query).then((featureSet)=>{
        if(featureSet.features[0]){
            table_data.value=featureSet.features.map((item)=>{
                return item.attributes
            })
            table_display.value="block"
        }else{
            alert("未返回结果!")
        }

    })
}
var table_dblclick=(event)=>{
    query=new Query({
        returnGeometry:true,
        where:`name like '${event.name}'`
    })
    面要素图层.queryFeatures(query).then((featureSet)=>{
        if(featureSet.features[0]){
            var points=featureSet.features.map((item)=>{
                return item.geometry.centroid
            })
            view.goTo({
                target:points[0],
                zoom:18
            },{
                duration:500
            })
        }else{
            alert("未返回结果!")
        }
   })
}
var 重置_click=()=>{
    table_data.value=[]
    table_display.value="none"
    按名称查询.value=""
}
onMounted(()=>{
    线要素图层=new FeatureLayer({
        title:"线要素图层",
        url:"https://ws8575.club/web/rest/services/Hosted/道路_线要素_要素图层_3857/FeatureServer/0"
    })
    面要素图层=new FeatureLayer({
        title:"面要素图层",
        url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-fill",
                color:[255,255,255,0.3],
                outline:{
                    width:0
                }
            },
        },
        labelingInfo:[{
            labelExpressionInfo:{
                expression:`$feature.name`
            },
            minScale:10000
        }]
    })
    map = new Map({
        basemap:"satellite",
        layers:[线要素图层,面要素图层]
    })
    view = new MapView({
        container: "viewDiv",
        map: map,
        center:[119,36],
        zoom:12
    })
    view.ui.remove(["zoom","attribution"])
    layerList=new LayerList({
        view:view,
        container:"layerList",
        listItemCreatedFunction:(event)=>{
            let item = event.item
            if (item.title === "线要素图层") {//这里通过图层名称字符串获取到ListItem对象
                item.title = "山东省道路"//重新命名显示的图层名称
                item.actionsSections = [[{//这里嵌套了一个数组,多个数组之间进行了分组显示
                    className: "action-button esri-icon-applications",
                    id: "缩放到山东省道路图层"
                }]]
            }else if(item.title==="面要素图层"){
                item.title="青岛市AOI"
                item.panel={
                    className:"action-button esri-icon-review",
                    content:青岛市AOI_panel.value,//挂载DOM元素
                    open:true//设置默认不显示该panel
                },
                item.actionsSections = [[{//这里嵌套了一个数组,多个数组之间进行了分组显示
                    className: "action-button esri-icon-applications",
                    id: "缩放到青岛市AOI图层"
                }]]
            }

        }
    })
    layerList.on("trigger-action",(event)=>{
        if(event.action.id==="缩放到山东省道路图层"){
            view.goTo({
                target:线要素图层.fullExtent,
                scale:500000
            },{
                duration:2000
            })
        }else if(event.action.id==="缩放到青岛市AOI图层"){
            view.goTo({
                target:面要素图层.fullExtent,
                scale:500000
            },{
                duration:2000
            })
        }
    })
})//onMounted函数结尾
</script>

<style scoped>
#container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
}
span{
    color:rgb(150,150,150);
    white-space: pre-line;
}
</style>
  